<template>
    <div class="question-bank">
    	<p>
    		<span :class="activeIndex==1?'active':''" @click="changeActive('1')">问题库</span>
    		<span :class="activeIndex==2?'active':''" @click="changeActive('2')">反馈库</span>
    	</p>
    	<div class="common-style">
    		<div class="question-bank-title" :class="activeIndex==1?'showList':'hideList'" >
    			<div class="fl">
		  			<select class="select" v-model="haveType">
		  				<option value="">全部</option>
		  				<option :value="item.id" v-for="item in dataDictionary">{{item.value}}</option>
		  			</select>
		  			<input class="input" v-model="key1">
		  			<button class="Public-btn" @click="searchList()">搜索</button>
		  		</div>
		  		<button class="Public-btn fr" @click="questionFn('add')">创建问题</button>
		  		<button class="Public-btn fr" @click="contactConfiguration()">联系配置</button>
    		</div>
    		<div class="question-bank-title" :class="activeIndex==2?'showList':'hideList'" >
    			<div class="fl">
    				<input class="input" v-model="key2" style="position: relative;top: -1px;">
		  			<button class="Public-btn" @click="searchList()">搜索</button>
    			</div>
    		</div>
    		<div :class="activeIndex==1?'showList':'hideList'">
    			<!--<div>
			  		<span class="eg">问题库列表内部链接示例：questions/questions</span>
			  		<span class="eg">问题库详情内部链接示例：questionDetail/questionDetail?id=xxx</span>
			  	</div>-->
    			<div class="table-father">
	    			<table class="table">
		    			<thead>
		    				<th>序号</th>
		    				<th>问题名称</th>
		    				<th>发布人</th>
		    				<th>发布时间</th>
		    				<th>浏览量</th>
		    				<!--<th>id值</th>-->
		    				<th>操作</th>
		    			</thead>
		    			<tbody>
		    				<tr v-for="(item,index) in tableList">
		    					<td><span>{{index+1}}</span></td>
		    					<td class="cursor" :title="item.question">
		    						<span v-if="item.question.length>15">{{item.question.substring(0,15)}}....</span>
										<span v-if="item.question.length<16">{{item.question}}</span>
		    					</td>
		    					<td><span>{{item.createby}}</span></td>
		    					<td><span>{{item.createat}}</span></td>
		    					<td><span>{{item.pageview}}</span></td>
		    				<!--	<td><span>{{item.id}}</span></td>-->
		    					<td>
										<button class="Public-btn" @click="questionFn('lookOver',item.id)">查看</button>
										<button class="Public-btn" @click="questionFn('modify',item.id)">修改</button>
										<button class="Public-btn" @click="delArticle(item.id)">删除</button>
									</td>
		    				</tr>
		    				<tr>
									<td colspan="6" style="color: red" v-if="!tableList.length">暂无数据</td>
								</tr>
		    			</tbody>
		    		</table>
		    	</div>
	      	<Pageination  :total="model.total" :size="model.size" :page="model.page" :changge="pageFn"></Pageination>
    		</div>
    		<div :class="activeIndex==2?'showList':'hideList'">
    			<div class="table-father">
	    			<table class="table">
		    			<thead>
		    				<th>序号</th>
		    				<th>问题名称</th>
		    				<th>提出人</th>
		    				<th>提出时间</th>
		    				<th>电话</th>
		    				<th>邮箱</th>
		    				<th>操作</th>
		    			</thead>
		    			<tbody>
		    				<tr v-for="(item,index) in tableNextList">
		    					<td><span>{{index+1}}</span></td>
		    					<td class="cursor" :title="item.question">
		    						<span v-if="item.question.length>15">{{item.question.substring(0,15)}}....</span>
										<span v-if="item.question.length<16">{{item.question}}</span>
		    					</td>
		    					<td><span>{{item.nickname}}</span></td>
		    					<td><span>{{item.createat}}</span></td>
		    					<td><span>{{item.contactnumber}}</span></td>
		    					<td><span>{{item.contactemail}}</span></td>
		    					<td>
										<button class="Public-btn" @click="delArticle(item.id)">删除</button>
									</td>
		    				</tr>
		    				<tr>
									<td colspan="7" style="color: red" v-if="!tableNextList.length">暂无数据</td>
								</tr>
		    			</tbody>
		    		</table>
		    	</div>
	      	<PageinationNext  :total="modelNext.total" :size="modelNext.size" :page="modelNext.page" :changge="pageFnNext"></PageinationNext>
    		</div>

    	</div>
    </div>
</template>
<script>
	import Pageination from "../shareComponent/pageination";
	import PageinationNext from "../shareComponent/pageination";
	export default {
    name:'question-bank',
    data(){
      return{
      	/*tab选中*/
      	activeIndex:1,
      	/**分页初始化**/
        model: {
            total: 0,//总数
            size: 10,//每页显示条目个数不传默认20
            page: 1,//当前页码
        },
      	modelNext: {
            total: 0,//总数
            size: 10,//每页显示条目个数不传默认20
            page: 1,//当前页码
        },
        /*当前页码*/
        page:"",
        /*table列表*/
        tableList:[],
        tableNextList:[],
        windowHeight:0,
        /*数据字典下拉列表*/
        dataDictionary:[],
        /*数据字典id值*/
        type:"",
        haveType:"",
        noType:"",
        /*搜索关键字*/
        key:"",
        key1:"",
        key2:"",
        
        /*当前页码*/
	    	currentPage:1,
	    	/*当前页码*/
	    	currentNextPage:1,
      }
    },
    components:{Pageination,PageinationNext},
    mounted:function(){
    	this.init();
    },
    methods:{
      init: function(){
      	this.activeIndex=this.$route.query.status?this.$route.query.status:this.activeIndex;
        this.changeActive(this.activeIndex);
        this.queryHotList();
      },
      /*切换tab*/
    	changeActive:function(index){
    		this.activeIndex=index;
    	},
    	/*获取数据字典下拉列表*/
    	queryHotList:function(){
	   		this.$get('/system/queryDataByParentId/9')
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
	            this.dataDictionary=response.resultData;
	            /*for(var i=0;i<this.dataDictionary.length;i++){
	            	if(this.dataDictionary[i].id==10){
	            		this.dataDictionary.splice(i,1);
	            		return;
	            	}
	            }*/
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        });
	   	},
    	/*获取数据列表*/
    	queryDataList:function(status){
    		if(status==1){
    			this.page=this.model.page;
    			this.type=this.haveType;
    			this.key=this.key1;
    		}else{
    			this.page=this.modelNext.page;
    			this.type="";
    			this.key=this.key2;
    		}
    		this.$post(
          '/qa/queryQuestionByType',
          {
          "istop":0,
          "type":this.type,
          "status":status,
          "page":this.page,
          "size":"10",
          "orderBy":"createAt",
          "key1":this.key
          }
        ).then(response => {
        	if(response==444){
          	this.$router.push({path: '/login'});
          }else{
	          if (response.resultCode == "0") {
	          	for(var i=0;i<response.resultData.qaInfoList.length;i++){
	          		response.resultData.qaInfoList[i].createat=response.resultData.qaInfoList[i].createat?this.formatTime(response.resultData.qaInfoList[i].createat):"";
	            }
	          	if(status==1){
	          		this.tableList = response.resultData.qaInfoList;
	            	this.model.total=response.resultData.totalCount;
	          	}else{
	          		this.tableNextList = response.resultData.qaInfoList;
	            	this.modelNext.total=response.resultData.totalCount;
	          	}
	          }else{
	          	layer.alert(response.resultMsg);
	          }
	      	}
      	}).catch(err => {
          console.log(err)
        })
    	},
    	/*页码切换执行方法*/
			pageFn:function(val){
				this.model.page = parseInt(val);
				this.currentPage=parseInt(val);
				//此处调列表数据接口
				this.queryDataList("1");
			},
			pageFnNext:function(val){
				this.modelNext.page = parseInt(val);
				this.currentNextPage=parseInt(val);
				//此处调列表数据接口
				this.queryDataList("2");
			},
			/*搜索列表*/
			searchList:function(){
				if(this.activeIndex==1){
					this.model.page =1;
					this.currentPage=1;
					this.queryDataList("1");
				}else{
					this.modelNext.page =1;
					this.currentNextPage=1;
					this.queryDataList("2");
				}
			},
			/*跳转页面*/
			questionFn:function(type,id){
				this.$router.push({path:"/main/createQuestion?currentType="+type+"&id="+id+"&status="+this.activeIndex});
			},
			/*联系人配置*/
			contactConfiguration:function(){
				this.$router.push({path:"/main/contactConfiguration"});
			},
			/*删除*/
			delArticle:function(id){
				var _this=this;
				layer.confirm('您确定要删除这条数据吗？', {
					title:"删除",
					btnAlign:"c",
				  btn: ['确定','取消'] //按钮
				}, function(){
					_this.$post('/qa/delete',
						[{
							id:id
						}]
					)
	    		.then(response => {
	    			/*未登录重定向*/
	          if(response==444){
	          	_this.$router.push({path: '/login'});
	          }else{
	          	if (response.resultCode ==0) {
	          		layer.alert("删除成功");
	          		if(_this.activeIndex==1){
									var num = Math.ceil(_this.model.total / _this.model.size)-1;
		          		if(_this.model.total-(_this.model.size*num)>1||_this.tableList.length>1){
		          			_this.model.page=_this.currentPage;
		          		}else if(_this.model.total==1){
	          				_this.model.page==1
		          		}else{
		          			_this.model.page=parseInt(_this.currentPage)-1;
		          		}
		          		_this.queryDataList('1');
								}else{
									var num = Math.ceil(_this.modelNext.total / _this.modelNext.size)-1;
		          		if(_this.modelNext.total-(_this.modelNext.size*num)>1||_this.tableNextList.length>1){
		          			_this.modelNext.page=_this.currentPage;
		          		}else if(_this.modelNext.total==1){
	          				_this.modelNext.page==1
		          		}else{
		          			_this.modelNext.page=parseInt(_this.currentPage)-1;
		          		}
		          		_this.queryDataList('2');
								}
		          }else{
		          	layer.alert(response.resultMsg);
		          }
	          }
	         
	        }).catch(err => {
	          console.log(err);
	        });
				});
			}
    }
	}
</script>
<style  lang="less" scoped>
	.question-bank{
		padding-top: 2px;
		>p{
	    text-align: center;
	    margin: 20px 0;
	    >span{
	    	width: 240px;
		    height: 40px;
		    line-height: 40px;
		    display: inline-block;
		    border: 1px solid #ddd;
		    color: #333;
		    text-align: center;
		    cursor: pointer;
	    }
	    >span.active {
		    background: #00307c;
		    color: #fff;
		    border: 1px solid #00307c;
			}
	    >span:last-child {
			    margin-left: -4px;
			}
		}
		.Public-btn:first-child{
			margin-left: 10px;
		}
	}
	.question-bank-title{
		height: 60px;
    line-height: 60px;
	}
	.showList{
		display: block;
	}
	.hideList{
		display: none;
	}
</style>


